<template>
  <div class="selected-users-simple">
    <span>{{ displayText }}</span>
  </div>
</template>

<script setup lang="ts">
import { computed, watch } from 'vue'
import type { User } from '../types'

const props = defineProps<{
  users: User[]
}>()

watch(
  () => props.users,
  (newUsers) => {
    // 保留日志用于调试
    console.log('[SelectedUsers.vue] users prop updated:', JSON.stringify(newUsers))
  },
  { deep: true, immediate: true }
)

// 合并显示逻辑到一个计算属性
const displayText = computed(() => {
  const count = props.users.length
  if (count === 0) {
    return '未选择用户'
  } else if (count === 1) {
    // 处理用户可能没有名字的情况
    return props.users[0]?.name || '用户无名称'
  } else {
    const firstName = props.users[0]?.name || '用户无名称'
    return `${firstName}等${count}人`
  }
})

// 移除 userNames 计算属性 (不再需要)
// const userNames = computed(() => { ... })
</script>

<style scoped>
.selected-users-simple {
  display: inline-block; /* 使其宽度自适应内容 */
  /* 移除内边距，调整字体和颜色使其更像普通文本 */
  padding: 0;
  margin: 0;
  font-size: 14px; /* 可以根据需要调整 */
  line-height: 1.5; /* 确保行高正常 */
  color: #606266; /* element-plus 次要文字颜色 */
}
</style>
